<template>
  <div class="edit-wrap">
    <div class="layui-form-item layui-form-text">
      <div class="layui-input-block">
        <div class="layui-unselect fly-edit" ref="iconWrapRef">
          <span @click="changeCurrent(0)">
            <i class="iconfont icon-yxj-expression"></i>
          </span>
          <span @click="changeCurrent(1)" >
            <i class="iconfont icon-tupian"></i>
          </span>
          <span @click="changeCurrent(2)">
            <i class="iconfont icon-lianjie"></i>
          </span>
          <span class="quote" @click="changeCurrent(3)">
            ”
          </span>
          <span @click="changeCurrent(4)">
            <i class="iconfont icon-emwdaima"></i>
          </span>
          <span @click="addHr()">
            hr
          </span>
          <span @click="changeCurrent(5)">
            <i class="iconfont icon-yulan1"></i>
          </span>
        </div>
        <textarea class="layui-textarea fly-editor" id='edit' v-model="content" name="content" ref="textAreaRef" @blur="blurEvent" @focus="focusEvent"></textarea>
      </div>
    </div>
    <div ref="modal">
      <Face :isShow="current === 0" @clickEvent="addFace" @cancel="closeModal"></Face>
      <UploadImg :isShow="current === 1" @clickEvent="addImg" @cancel="closeModal"></UploadImg>
      <LinkAdd :isShow="current === 2" @clickEvent="addLink" @cancel="closeModal"></LinkAdd>
      <QuoteAdd :isShow="current === 3" @clickEvent="addQuote" @cancel="closeModal"></QuoteAdd>
      <CodeAdd :isShow="current === 4" @clickEvent="addCode" @cancel="closeModal" :width="codeWidth" :height="codeHeight"></CodeAdd>
      <Preview :isShow="current === 5" :content="content" @cancel="closeModal"></Preview>
    </div>

  </div>
</template>

<script>
import Face from './Face'
import UploadImg from './UploadImg'
import LinkAdd from './LinkAdd'
import QuoteAdd from './QuoteAdd'
import CodeAdd from './CodeAdd'
import Preview from './Preview'
export default {
  name: 'editor',
  props: ['initContent'],
  components: {
    Face,
    UploadImg,
    LinkAdd,
    QuoteAdd,
    CodeAdd,
    Preview
  },
  data () {
    return {
      current: '',
      codeWidth: '',
      codeHeight: '',
      content: '',
      pos: ''
    }
  },
  watch: {
    initContent (newval) {
      this.content = newval
    }
  },
  updated () {
    // 内容更改就发送内容给父组件
    this.$emit('add', this.content)
  },
  mounted () {
    this.$nextTick(() => {
      this.ResizeWH()
      document.querySelector('body').addEventListener('click', this.handleEventClick)
      window.addEventListener('resize', this.ResizeWH)
    })
  },
  beforeDestroy () {
    document.querySelector('body').removeEventListener('click', this.handleEventClick)
  },
  methods: {
    focusEvent () {
      this.getPos()
    },
    blurEvent () {
      this.getPos()
    },
    getPos () {
      let cursorpos = 0
      const elem = this.$refs.textAreaRef
      if (document.selection) {
        // IE
        const selectRange = document.selection.createRange()
        selectRange.moveStart('character', -elem.value.length)
      } else if (elem.selectionStart || elem.selectionStart === 0) {
        cursorpos = elem.selectionStart
      }
      this.pos = cursorpos
    },
    changeCurrent (val) {
      if (this.current === val) {
        this.closeModal()
        return
      }
      this.current = val
    },
    ResizeWH () {
      this.codeWidth = this.$refs.textAreaRef.offsetWidth - 60
      this.codeHeight = this.$refs.textAreaRef.offsetHeight - 80
    },
    insert (val) {
      if (!val) {
        return
      }
      const tmp = this.content.split('')
      tmp.splice(this.pos, 0, val)
      this.content = tmp.join('')
    },
    addFace (item) {
      const content = ` face${item}`
      this.insert(content)
      this.pos += content.length
    },
    addImg (pic) {
      const content = ` img[${pic}]`
      this.insert(content)
      this.pos += content.length
    },
    addLink (link) {
      const content = ` a(${link})[${link}]`
      this.insert(content)
      this.pos += content.length
    },
    addQuote (quote) {
      const content = ` \n[quote]\n${quote}\n[/quote]`
      this.insert(content)
      this.pos += content.length
    },
    addCode (code) {
      const content = ` \n[pre]\n${code}\n[/pre]`
      this.insert(content)
      this.pos += content.length
    },
    addHr () {
      const content = `\n[hr]`
      this.insert(content)
      this.pos += 5
    },
    closeModal () {
      this.current = ''
    },
    handleEventClick (e) {
      if (this.$refs.iconWrapRef && !this.$refs.iconWrapRef.contains(e.target) && !this.$refs.modal.contains(e.target)) {
        this.closeModal()
      }
    }
  }
}
</script>

<style lang="scss">

.fly-editor{
  height: 260px
}
.quote{
  font-size: 22px;
  vertical-align: middle;
  position: relative;
  top: 4px;
}
.edit-wrap{
  position: relative;
}
.edit-content{
  position: absolute;
  left: 0;
  top: 50px;
  z-index: 20000;
  background: #fff;
}
.layui-layer-prompt{
  background: #fff;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
}
</style>
